<template>
  <div class="login-container">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" class="reset-form">
        <h2 class="login-title">注册用户</h2>
        <el-form-item label="邮箱" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input v-model="form.password2" show-password></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input style="float: left; width: 180px;" v-model="form.code"></el-input>
          <el-button type="primary" style="float: right; padding:12px" :disabled="btnChangeEnable" @click="getValidateCode(form.username)">{{buttonName}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">确定</el-button>
          <el-button type="primary" @click="cancel()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
import { RSAEncrypt } from '@/api/password/password'
import { getRegisterEmail, register } from '@/api/request/user'
import { Message } from 'element-ui'
// import store from '@/store/store'
export default {
  data () {
    return {
      form: {
        username: '',
        password: '',
        password2: '',
        code: ''
      },
      btnChangeEnable: false,
      time: 30,
      buttonName: '获取验证码',
      rules: {
        username: [
          {required: true, message: '用户名不能为空', trigger: 'blur'},
          {min: 3, max: 50, message: '用户名3-50位', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {min: 3, max: 15, message: '密码3-15位', trigger: 'blur'}
        ],
        password2: [
          {required: true, message: '密码不能为空', trigger: 'blur'},
          {min: 3, max: 15, message: '密码3-15位', trigger: 'blur'}
        ],
        code: [
          {required: true, message: '验证码不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    getValidateCode (email) {
      if (this.form.username) {
        let me = this
        getRegisterEmail({email: email}).then(function () {
          me.btnChangeEnable = true
          let interval = window.setInterval(function () {
            me.buttonName = me.time + '秒后重新获取'
            --me.time
            console.log(me.time)
            if (me.time < 0) {
              me.buttonName = '获取验证码'
              me.time = 30
              me.btnChangeEnable = false
              window.clearInterval(interval)
            }
          }, 1000)
        })
      } else {
        Message({
          message: '邮箱不得为空',
          type: 'error',
          duration: 3 * 1000
        })
      }
    },
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        // console.log(valid) 验证通过为true，有一个不通过就是false
        if (valid) {
          const enpas = RSAEncrypt(this.form.password)
          console.log(enpas)
          register({
            email: this.form.username,
            password: enpas,
            validate_code: this.form.code
          }).then(data => {
            console.log(data)
            this.$router.replace({path: '/login'})
          })
        } else {
          console.log('验证失败')
          return false
        }
      })
    },
    cancel () {
      this.$router.replace('/login')
    }
  }
}
</script>

<style acoped>
  .reset-form {
    width: 400px;
    margin: 160px auto; /* 上下间距160px，左右自动居中*/
    background-color: rgb(255, 255, 255, 0.8); /* 透明背景色 */
    padding: 30px;
    border-radius: 20px; /* 圆角 */
  }

  /* 背景 */
  .login-container {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(105, 148, 212, 0.8);
  }

  /* 标题 */
  .login-title {
    color: #f39810;
    text-align: center;
  }

</style>
